<template>
  <div draggable="true">
    <div id="descendants">
    </div>
    <div class="hidden"></div>
    <div id="calculateWidth"></div>
  </div>
</template>

<script>
import init from '../utils'


export default {
  name: "mindmap",
  props: {
    value: String,
    key_: String
  },
  created() {
    this.init()
  },
  watch: {
    value() {
      this.init()
    }
  },
  methods: {
    init() {
      let value = this.value
      value = this.key_ + '\n\t' + value.replaceAll("\n", "\n\t")
      this.$axios.post('/api', {q: value}).then((r) => {
        init(eval(r.data))
      })
    }
  }
}
</script>

<style scoped>

</style>
